<template>
  <div id="body" class="flex">

   <div class="photo flex" >
      <el-image
        :src="getImgSrc(item)"
        class="img"
        fit="cover">
      </el-image>
   </div>
    <div id="hide" class="flex" v-if="item.formState == 1">

     <div id="title" class="card">{{item.title}}</div>
      <!-- 内容 -->
      <div id="content" class="card" v-html="item.content"></div>

      <!-- 标签 -->
      <div id="flag" class="card">
        <el-tag type="success">管理员</el-tag>
        <el-tag type="info">图文</el-tag>
        <el-tag type="warning">科普</el-tag>
        <!-- <el-tag type="danger">标签五</el-tag> -->
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  props:['item','CardsId','index'],
  methods:{
       getImgSrc(item){
          let src= item.img[0]==''?item.headphoto:item.img[0]
          return src
       },
        // 缩放
        zoom(id,item){      
            item.formState=0
            this.$emit('zoom',id,this.CardsId,this.index)
        },
        // 展开
        unfold(id,item){
            item.formState=1
            this.$emit('unfold',id,this.CardsId,this.index)
        }
  }
};
</script>
<style scoped lang="less">

*{
    --ArticleBodyHeight:300px;
}
#body{
    width: 100%;
    justify-content: space-between;
    flex-wrap: nowrap;
    overflow: hidden;
    margin: 15px 0;

}
.FunImg{
    width: 40px;
    height:40px;
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 1;
}
#hide{
    width: 200%;
    padding: 10px;
    height: var(--ArticleBodyHeight);
    box-sizing: border-box;
    margin: 0 5px;
    color: black;
     
    .card{
        padding: 10px;
        box-sizing: border-box;
        box-shadow: 0 0 5px black;
        background: white;
        border-radius: 5px;
        width: 80%;
    }
    // 内容
    #content{
        height: 50%;
        overflow: auto;
    }
    // 标签
    #flag{    
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 50px;
        // background: rgba(0, 0, 0, 0.1);
        background: none;
        box-shadow: none;

        .el-tag{
            margin: 5px;
        }
    }
}
  
.photo{
    position: relative;
    width: 100%;
    height: var(--ArticleBodyHeight);
    border-radius: 10px;
    overflow: hidden; 
    border: 1px solid lightgray; 

    .img{
        border-radius: 10px;
        height: 100%;
        width: 100%;
        display:block;
        transition: all 0.2s linear;
    } 
    // .img:hover{
    //    scale: (1.1);
    //    transition: all 0.2s linear;
    //    opacity: 0.9;
    // }
}
.zoom{
        width: 100%;
        // animation: 0.2s zoom linear 0.5s;
}
.unfold{
        width: 20%;
        // animation: 0.2s unfold linear 0.5s;
 }
</style>